<template>
  <div>
    <input
      :value="value"
      @input="$emit('update:modelValue', value)"
      type="radio"
      :id="id"
      :name="name"
    />
    <label :for="id" class="department-card" v-debounce="{ fn: jump }">{{ info }}</label>
  </div>
</template>

<script lang="ts" setup>
import { defineProps } from "vue";
import { useRouter } from "vue-router";
// import { userRequest } from "../api/UserRequest";
const props = defineProps({
  // label绑定
  id: {
    type: Number,
    required: true,
  },
  info: {
    type: String,
    required: true,
  },
  //   分辨是否是同一个值的单选选项
  name: {
    type: String,
    required: true,
  },
  // 单选框绑定的值
  value: {
    type: Number,
  },
});

const router = useRouter();

// 跳转函数，通过部门id获取部门信息后跳转
function jump(): void {
  if (!props.value) return;
  // 将部门id存放在sessionStorage中便于后续使用
  sessionStorage.setItem("depId", props.value + "");
  router.push({
    name: "DEnrollment",
  });
}
</script>

<style lang="scss" scoped>
input {
  display: none;
  &:checked + label {
    border-bottom: 30px solid #3f89b9;
  }
}
.department-card {
  cursor: pointer;
  margin: 0 50px;
  width: 150px;
  height: 150px;
  border-radius: 30px;
  box-shadow: 3px 3px 10px #707070;
  background-color: white;
  color: #8a8888;
  font-size: 38px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.5s;
  &:hover {
    border-bottom: 30px solid #3f89b9;
  }
}
</style>